<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<input type="hidden" id="goods_id" value="{$goods_id}">
<div class="demoTable">
    搜索商品名称：
    <div class="layui-inline">
        <input class="layui-input" name="goods_name" id="goods_name" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>
<table class="layui-hide" id="goodsList" lay-filter="test"></table>
<script type="text/html" id="image">
    <img src="{{d.image}}" alt=""  >
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据返回页面</button>
    </div>
</script>
<script>
    layui.use(['layer', 'table','jquery'], function(){ //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
        var layer = layui.layer //弹层
            ,table = layui.table //表格
            ,$ = layui.jquery //元素操作

        //执行一个 table 实例
        table.render({
            elem: '#goodsList'
            ,id: 'goodsList'
            ,height: 500
            ,url: "{:url('selectGoodsSku')}?goods_id="+$('#goods_id').val() //数据接口
            ,title: '商品表'
            ,toolbar: '#toolbarDemo'
            ,page: true //开启分页
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'attr_values', title: '规格名称', width:90}
                ,{field: 'sku_image', title: '商品图片', width: 90, templet: "#image"}
                ,{field: 'sku_stock', title: '商品库存', width: 90}
                ,{field: 'sku_price', title: '商品价格', width: 90}
            ]]
        });

        //将选中的数据添加至父页面
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            let html = '';
            let sku_id = parent.$('#sku_id').val();

            //判断父页面的商品id中是否有值
            if (sku_id) {
                sku_id = sku_id.split(',');
            } else {
                sku_id = [];
            }

            for (let index in data) {
                //判断商品id是否已在数组中
                if (sku_id.includes(data[index].id.toString())){
                    continue;
                }
                sku_id.push(data[index].id.toString());
                html += "<img src='"+data[index].image+"' class='image' />";
            }
            parent.$('#sku_images').prepend(html);
            parent.$('#sku_id').val(sku_id);
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
        });

        // var active = {
        //     reload: function(){
        //         var goods_name = $('#goods_name').val();
        //
        //         //执行重载
        //         table.reload('goodsList', {
        //             page: {
        //                 curr: 1 //重新从第 1 页开始
        //             }
        //             ,where: {
        //                 goods_name
        //             }
        //         });
        //     }
        // };
        //
        // $('.layui-btn').on('click', function(){
        //     var type = $(this).data('type');
        //     active[type] ? active[type].call(this) : '';
        // });
    });
</script>

